<!--
 * @Date: 2023-03-15 14:44:17
 * @LastEditors: LDH 574427343@qq.com
 * @LastEditTime: 2023-05-24 15:20:48
 * @FilePath: /flow-designer/src/components/drawer/conditionDrawer.vue
-->

<template>
    <el-drawer :append-to-body="true"  v-model="visible" class="set_condition" :show-close="false" :size="600" :before-close="saveCondition">
        <template #header="{ titleId, titleClass }">
            <h3 :id="titleId" :class="titleClass" class="condition-title">条件分支设置</h3>
        </template>
        <div class="demo-drawer__content">
             <div class="drawer-container">
               <div class="container-top">
                 <el-input style="width: 70%;margin-right: 10px;" v-model="conditionConfig.nodeName"></el-input>
                 <el-select style="width: 20%;" v-model="conditionConfig.priorityLevel">
                   <el-option v-for="item in conditionsConfig.conditionExpressionList.length"
                              :value="item"
                              :key="item"
                              :label="`优先级${item}`"
                   ></el-option>
                 </el-select>
               </div>
               <p class="tip">同时满足以下条件</p>

               <div class="condition-list">
                  <div class="condition-list__item" v-for="(item,index) in conditionConfig.conditionList" :key="index">
                     <el-select size="small" v-model="item.columnId" placeholder="请选择" style="width: 20%;" @change="filedChange($event,item,index)">
                       <el-option v-for="it in widgetList"
                                  :value="it.id"
                                  :key="it.id"
                                  :label="it.label"
                       ></el-option>
                     </el-select>
                    <el-select size="small" v-model="item.optType" placeholder="请选择"  style="width: 15%;margin-right: 10px;margin-left: 10px;">
                      <el-option v-for="it in optTypes"
                                 :value="it.value"
                                 :key="it.value"
                                 :label="it.label"
                      ></el-option>
                    </el-select>
                     <div style="margin-right: 5px;width:80% ">
                       <template v-if="item.columnType==='checkbox'">
                         <el-checkbox-group v-model="item.value" size="small"  placeholder="请选择" >
                           <el-checkbox v-for="it in item.opt.optionItems"
                                        :value="it.value"
                                        :key="it.value"
                                        :label="it.label"
                           ></el-checkbox>
                         </el-checkbox-group>
                       </template>
                       <template v-if="item.columnType==='select'">
                          <el-select v-model="item.value"  size="small"  placeholder="请选择" >
                            <el-option v-for="it in item.opt.optionItems" :label="it.label" :value="it.value" :key="it.value">
                            </el-option>
                          </el-select>
                       </template>
                       <template v-if="item.columnType==='radio'">
                         <el-radio-group v-model="item.value" size="small">
                           <el-radio v-for="it in item.opt.optionItems"
                                      :label="it.value"
                                      :key="it.value"
                                      :value="it.value"
                           >{{it.label}}</el-radio>
                         </el-radio-group>
                       </template>
                       <template v-if="!['radio','select','checkbox'].includes(item.columnType)">
                           <el-input  placeholder="请输入"   size="small" v-model="item.value"></el-input>
                       </template>
                     </div>
                     <el-button size="small" type="danger" :icon="Delete" @click="delCondition(index)"></el-button>
                  </div>
               </div>
               <el-button size="small" @click="addCondition" type="primary">添加条件</el-button>
             </div>
            <div class="demo-drawer__footer clear">
                <el-button type="primary" @click="saveCondition">确 定</el-button>
                <el-button @click="closeDrawer">取 消</el-button>
            </div>
        </div>
    </el-drawer>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import $func from '@/utils/index'
import { useStore } from '@/stores/index'
import {optTypes, inputType} from '@/utils/const'
import {Delete} from "@element-plus/icons-vue";
let props = defineProps({
  processData:{
    type: Object,
    default: () => ({}),
  }
});



const getList = (widgetList,arr) => {
  widgetList.forEach(item=>{
    if (inputType.includes(item.type)){
      let opt = item.options;
      arr.push({
        label: opt.label,
        id: item.id,
        type: item.type,
        opt,
      })
    }
    if (item.type ==='grid'){
      let cols= item.cols
      cols.forEach(it=>{
        let li =it.widgetList ||[];
        getList(li,arr)
      })
    }
  })
}

const widgetList = computed(()=>{
  let arr=[]
  let list =props.processData?.formJson?.widgetList || []
  getList(list,arr)
  return arr;
})


let conditionVisible = ref(false)
let conditionsConfig = ref({
    conditionExpressionList: [],
})
let conditionConfig = ref({})
let PriorityLevel = ref('')

const filedChange = (val,item,index) => {
  let s = widgetList.value.find(item=>item.id===val)
  item.opt = s.opt
  item.columnType = s.type
  if (item.columnType==='checkbox'){
    item.value = []
  }
}
let store = useStore()
let { setCondition, setConditionsConfig } = store
let flowId = computed(()=> store.flowId)
let conditionsConfig1 = computed(()=> store.conditionsConfig1)
let conditionDrawer = computed(()=> store.conditionDrawer)
let visible = computed({
    get() {
        return conditionDrawer.value
    },
    set() {
        closeDrawer()
    }
})
watch(conditionsConfig1, (val) => {
    conditionsConfig.value = val.value;
    PriorityLevel.value = val.priorityLevel
    conditionConfig.value = val.priorityLevel
        ? conditionsConfig.value.conditionExpressionList[val.priorityLevel - 1]
        : { nodeApproveList: [], conditionList: [] }
  console.log('33',conditionsConfig.value)
  console.log('334',conditionConfig.value)
})




const addCondition = async () => {
  console.log(conditionConfig.value.conditionList);
  conditionConfig.value.conditionList.push({
    columnId: '',
    columnType: '',
    optType: "4",
    value:"",
    opt:{}
  })
}

const delCondition = (index) => {
  conditionConfig.value.conditionList.splice(index, 1)
}
/**条件抽屉的确认 */
const saveCondition = () => {
    closeDrawer()
    let a = conditionsConfig.value.conditionExpressionList.splice(PriorityLevel.value - 1, 1)//截取旧下标
  console.log(a)
    conditionsConfig.value.conditionExpressionList.splice(conditionConfig.value.priorityLevel - 1, 0, a[0])//填充新下标
    conditionsConfig.value.conditionExpressionList.map((item, index) => {
        item.priorityLevel = index + 1
    });
    for (let i = 0; i < conditionsConfig.value.conditionExpressionList.length; i++) {
      conditionsConfig.value.conditionExpressionList[i].error = $func.conditionStr(conditionsConfig.value, i) === "请设置条件" && i !== conditionsConfig.value.conditionExpressionList.length - 1
      conditionsConfig.value.conditionExpressionList[i].nodeDisplay =  $func.conditionStr(conditionsConfig.value, i);
    }
    setConditionsConfig({
        value: conditionsConfig.value,
        flag: true,
        id: conditionsConfig1.value.id
    })
}

const closeDrawer = (val) => {
    setCondition(false)
}
</script>
<style lang="scss" scoped>
ul, li {
    list-style: none;
}
.el-drawer__header{
  margin-bottom: 0;
}
.condition-title{
  text-align: center;
}
.drawer-container{
  height: calc(100vh - 150px);
  .container-top{
    display: flex;
    .top-item{
      &:first-child{
        //width: 80%;
      }
    }

  }

  .condition-list{
    margin-bottom: 10px;
    .condition-list__item{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  }
}


.set_condition .condition_content{
    padding: 20px 20px 0;
}

.set_condition p.tip {
  margin: 10px 0;
  color: black;
}

.set_condition  ul {
    max-height: 500px;
    /* overflow-y: scroll; */
    margin-bottom: 20px;
}
.set_condition  ul li{
    height: 50px;
    line-height: 50px;
}
.set_condition ul li span {
    float: left;
    margin-right: 8px;
    width: 120px !important;
    text-align: right;
    color: #0857a1;
}
.set_condition ul li div {
    display: inline-block;
    width: 370px;
}

.set_condition ul li div p:not(:last-child) {
    margin-bottom: 10px;
}

.set_condition ul li:not(:last-child)>div>p {
    margin-bottom: 20px;
}

.set_condition ul li div p select {
    width: 50%;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
}
.set_condition ul li div p input {
    width: 200px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
}

.set_condition ul li p.selected_list {
    padding-left: 10px;
    border-radius: 4px;
    min-height: 32px;
    border: 1px solid rgba(217, 217, 217, 1);
    word-break: break-word;
}

.condition_list .el-dialog__body {
    padding: 16px 26px;
}
.condition_list p {
    color: #666666;
    margin-bottom: 10px;
}

.condition_list p.check_box{
    margin-bottom: 0;
    line-height: 30px;
}

</style>
